<script lang="ts" setup>
const { wechat } = defineProps<{ wechat: { result: string, visible: boolean } }>()

// 自定义事件
defineEmits<{ (e: 'onCancel'): void }>()

const alipayFormHtml = ref('');

watch(() => wechat.result, (newValue) => {
  // console.log('监听到支付表单变化：', newValue)
  alipayFormHtml.value = newValue;

  nextTick(() => {
  const form = document.getElementById('paymentFormContainer')?.querySelector('form');
  if (form) {
    form.submit(); // 手动提交表单
  } else {
    console.error('未能获取表单');
  }

});
},
  {immediate: true}
);


</script>

<template>
  <div class="wechat" v-if="wechat.visible">
    <div class="bg">
      <div class="content flexc flex-col wfull relative">
        <img @click="$emit('onCancel')" src="/images/svg/close_icon.svg"
          class="absolute top-30px right-30px cursor-pointer select-none" />
        <span flex text-22px color="#404040" mb-25px>请使用<span color="#1BB723">支付宝</span>扫码支付</span>
        <!-- 支付宝表单 -->
        <div v-if="alipayFormHtml" w-1200px h-900px b="~ #d7d7d7 rounded-5px">
          <div v-html="alipayFormHtml" id="paymentFormContainer"></div>
        </div>
        <div v-else>加载中...</div>
        <p mt-4px color="#7f7f7f" ml-4px>请尽快扫码完成支付，以便订单尽快处理！</p>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.wechat {
  overflow: hidden;
}

.bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  outline: 0;
  z-index: 1200;
  width: 1200px;
  height: 1000px;
  margin: auto;
  border-radius: 10px;
  background-color: white;
  padding: 30px;
  box-shadow: 0px 0px 10px 0px rgba(150, 149, 149, 0.6);
}
</style>